<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>行内盒模型 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/20.bb3b854e.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="active sidebar-link">03-行内盒模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/05-行内盒模型.html#字体属性" class="sidebar-link">字体属性</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/05-行内盒模型.html#文本属性" class="sidebar-link">文本属性</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/05-行内盒模型.html#继承" class="sidebar-link">继承</a></li></ul></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="行内盒模型"><a href="#行内盒模型" class="header-anchor">#</a> 行内盒模型</h1> <blockquote><p>特点</p> <blockquote><p>行内元素不支持设置宽度和高度</p> <p>行内元素可以设置padding.但是垂直方向的padding不会影响布局</p> <p>行内元素可以设置boder,垂直方向的border不会影响布局</p> <p>行内元素可以设置margin,垂直方向的margin不会影响布局</p></blockquote></blockquote> <h2 id="字体属性"><a href="#字体属性" class="header-anchor">#</a> 字体属性</h2> <h3 id="字体大小-font-size"><a href="#字体大小-font-size" class="header-anchor">#</a> 字体大小(font-size)</h3> <blockquote><p>font-size实际上设置的是<strong>字体的高度</strong>, 原因很简单为了保证CSS的视觉效果,</p> <p>单位:</p> <ul><li><p>px像素单位是相对于显示器屏幕分辨率而言的。几乎所有游览器的font-size默认大小都是16像素,除非用户去修改偏好设置</p></li> <li><p><strong>em单位</strong>是相对元素的字体大小进行计算, 相对em会继承父级元素的字体大小。</p></li></ul></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">h3</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>1.5em<span class="token punctuation">}</span><span class="token comment">/*24px*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这会产生一个问题</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">p</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>1.5em<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">div</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>1.5em<span class="token punctuation">;</span><span class="token punctuation">}</span>
&lt;div&gt;
	div1
	&lt;p&gt;p1&lt;/p&gt;
&lt;/div&gt;
<span class="token comment">/*我们可以使用百分比来代替em.  150%和1.5em在这里是没有什么区别的，这取决于个人偏好.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><blockquote><p>此时p元素的font-size会变成1.5em*1.5em约等于2.25em或36px</p> <p>我们希望这个单位是一个固定的。就可以使用rem</p></blockquote> <ul><li><strong>rem的单位</strong>（root elemnet 根元素）是相对于根元素<html>l的字体大小设置</html></li></ul> <p>如果html元素没有设置font-size则默认1rem=16px.</p> <h3 id="颜色-color"><a href="#颜色-color" class="header-anchor">#</a> 颜色(color)</h3> <blockquote><p>color 用来设置文字颜色</p> <p>默认情况下文本渲染为黑色.链接除外(它的颜色是活力蓝)</p></blockquote> <p><strong>font-size大小选择</strong></p> <blockquote><p>没有硬性要求，首先要保证字体足够大，而且人眼看着足够舒服即可.</p></blockquote> <h3 id="字体族-font-family"><a href="#字体族-font-family" class="header-anchor">#</a> 字体族(font-family)</h3> <blockquote><p><strong>字体族是什么</strong>一个备选字体的列表,优先级由左往右</p> <p>这种后备机制是font-family属性的重要特性,因为不同的操作系统和移动设备都可能安装了不同的字体</p> <p>​				可选值</p> <p>​								serif  衬线字体</p> <p>​								sanserif  非衬线字体</p> <p>​								monospace 等宽字体</p> <p>​													---指定字体的类别，游览器会自动使用该类别下的字体</p> <p>​					多个字体间使用，隔开，字体生效时优先使用第一个，第一个无法使用则使					用第二个</p> <blockquote><p>有衬线(serif)字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同. 中文字体中的宋体就是一种最标准的serif字体，衬线的特征非常明显.字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一.</p> <p>无衬线(sans serif) 没有这些额外的装饰，而且笔画的粗细差不多  无衬线字体醒目，适合用于标题、广告、海报. <strong>需要醒目但不需要长时间阅读的地方</strong>.</p> <p>随着现代生活和流行趋势的变化，如今的人们越来越喜欢用无衬线体，因为他们看上去“更干净”。</p></blockquote></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* @font-face 可以将服务器的字体直接提供给用户去使用
					问题 
						1.加载速度
						2.版权
					*/</span>

		<span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
			<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;yunmu&quot;</span> <span class="token punctuation">;</span><span class="token comment">/*指定字体的名字*/</span>
			<span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span><span class="token comment">/*服务器跟字体的路径*/</span>
		<span class="token punctuation">}</span>

		<span class="token selector">div</span><span class="token punctuation">{</span>
			<span class="token property">font-family</span><span class="token punctuation">:</span>yunmu<span class="token punctuation">;</span><span class="token comment">/*在div里面应用yunmu的字体*/</span>
		<span class="token punctuation">}</span>
&lt;div&gt;天青色等烟雨而我在等你&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="字体粗细-font-weight"><a href="#字体粗细-font-weight" class="header-anchor">#</a> 字体粗细(font-weight)</h3> <blockquote><p>单位</p> <p>​			关键字<strong>normal.bold,bolder</strong>和<strong>lighter</strong></p> <p>​			100的整数倍:100,200,300,400等等,最大为900,默认normal对应400 bold对应			700（没什么用）</p></blockquote> <h3 id="字体样式-font-style"><a href="#字体样式-font-style" class="header-anchor">#</a> 字体样式(font-style)</h3> <blockquote><p><strong>1.正常(normal)</strong></p> <p><strong>2.italic( 斜体 )</strong></p> <p>注: oblique也是斜体,用的比较少,了解即可</p> <p><strong>区别:</strong></p> <p>1.italic带有倾斜属性的字体才可以设置倾斜的操作</p> <p>2,oblique没有带有倾斜属性的字体也可以设置倾斜操作</p></blockquote> <h3 id="字体是否为小型大写字母-font-variant"><a href="#字体是否为小型大写字母-font-variant" class="header-anchor">#</a> 字体是否为小型大写字母 (font-variant)</h3> <ol><li>normal   默认值(正常显示)。</li> <li>small-caps	小型大写字母。</li></ol> <p><strong>写法:</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">font-variant</span><span class="token punctuation">:</span>small-caps<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="字体的复合属性"><a href="#字体的复合属性" class="header-anchor">#</a> 字体的复合属性</h3> <p><strong>基本型:</strong></p> <p>复合写法,这两个个属性是必须的</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">font</span><span class="token punctuation">:</span> font-size  font-family<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>复杂型:</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">font的</span><span class="token punctuation">:</span>fons-style  font-weight font-size/line-height  font-family<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>font-size/line-height写法必须加斜杠</p> <h2 id="文本属性"><a href="#文本属性" class="header-anchor">#</a> 文本属性</h2> <h3 id="行高-line-height"><a href="#行高-line-height" class="header-anchor">#</a> 行高(line-height)</h3> <blockquote><p><strong>行高: 控制每一行文字的高度,文字会在这个行高内垂直居中显示</strong></p> <p>​					通过line-height来设置行高</p> <p>​					行高可以直接指定一个大小（px,em）</p> <p>​					也可以直接为行高设置一个整数</p> <p>​						    	--如果是一个整数，行高将会是字体大小的指定倍数</p> <p>字体框</p> <p>​			字体框就是字体存在的格子,设置font-size实际上就是设置字体框的高度</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
	 <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
	 <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;div&gt;天空一望无际是海洋的倒影&lt;/div&gt;
<span class="token comment">/*此时这个文本的高度是多少?
 我们设置了p标签字体为100px,但是p标签实际高度为132像素.那这个132像素哪里来的?这个就是行高*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>当我们给文本设置字体大小,会依照比例(1.32)给这行文字设置行高,行高撑开了这个盒子</strong>.</p> <p><strong>没有默认高度的时候文字的font-size决定line-height决定height</strong></p> <p>我们可以修改行高</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code> 	<span class="token selector">div</span><span class="token punctuation">{</span><span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span>
	&lt;div&gt;天空一望无际<span class="token punctuation">,</span>是海洋的倒影&lt;/div&gt;
	<span class="token comment">/*这个盒子的高度是多少?
  	打开开发者工具可以看到,盒子的高度就是0,就无法将盒子撑开.
  	我们还可以把font-size设置为0,行高设置150px*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">div</span><span class="token punctuation">{</span>		
		<span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token property">line-height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	&lt;div&gt;天空一望无际<span class="token punctuation">,</span>是海洋的倒影&lt;/div&gt;
	<span class="token comment">/*盒子里面的文字消失了,但是盒子依旧被撑开.
    所以盒子怎么被撑开,和文字关系不是最直接的,和行高是最直接的关系.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>一般来说,行高的取值范围在1.2到1.5之间,行与行相对排版良好.不至于太密或者太疏.</strong></p> <p><strong>行高是可以被继承的</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">line-height</span><span class="token punctuation">:</span>1.5<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>这里给line-height设置了没有单位1.5,的意思就是当前bodyfont-size的1.5倍.后面所有元素的font-size都会和行高成比例</p> <p>如果body的font-size为16px,那么默认的line-height就是24px;</p> <p>也可以给行高设置像素值,em,百分比单位.</p> <p><strong>注意</strong>:前面如果body用的是百分比或em,其子元素继承的都是计算后得到的像素值,不会与自己的字体大小成比例.</p> <p>但无单位的值就不会导致这个问题,因此,如果给line-height设置没有单位的值,那么子元素继承的是一个系数,永远与自己的font-size成比例.</p></blockquote> <blockquote><p>行高还可以用来设置行间距</p> <p><strong>行间距</strong></p> <p>​			--- 两个文字之间的距离就是行间距,行间距会在文字上下平均分配</p> <p>​				<strong>没有直接控制行间距的样式</strong></p> <p>​				<strong>文字大小 + 上下行间距 = 行高.</strong>      1</p> <p><strong>所以我们可以通过控制行高去控制上下的间距</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">div</span><span class="token punctuation">{</span>		
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
			<span class="token property">line-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token comment">/*可以将行高设置为高度一样的值,使一个单行的文字在一个元素中垂直居中*/</span>
		&lt;div&gt;天空一望无际<span class="token punctuation">,</span>是海洋的倒影&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="垂直对齐方式-verticle-align"><a href="#垂直对齐方式-verticle-align" class="header-anchor">#</a> 垂直对齐方式(verticle-align)</h3> <p><strong>基线:在文本中,就是字母X下面两个脚形成的线</strong>.<strong>(只存在于行内(块)元素).</strong></p> <blockquote><p><strong>verticle-align:对齐方式的设置</strong></p> <blockquote><p>1.baseline:基线对齐(所有文本默认的对齐方式)</p> <p>2.中线:middle</p> <p>3.顶部对齐:top</p> <p>4.底部对齐:bottom</p></blockquote></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>		<span class="token selector">p</span><span class="token punctuation">{</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">span</span><span class="token punctuation">{</span>
			 <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
           	 <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	&lt;p&gt;xmind&lt;span&gt;xmind&lt;/span&gt;&lt;/p&gt;
	<span class="token comment">/*打开开发者工具,给span标签字体大小调大.
  		无论调大调小都是以基线对齐*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">span</span><span class="token punctuation">{</span>   <span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>  <span class="token punctuation">}</span>
/*此时在跟P文本的顶部对齐.
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p><strong>如果你调整verticle-align对齐困难,可以使用像素值.</strong></p> <p>​															正值往上,负值向下</p> <p><strong>也可以使用百分比,百分比相对于line-height进行计算.</strong></p></blockquote> <h3 id="文本缩进-text-indent"><a href="#文本缩进-text-indent" class="header-anchor">#</a> 文本缩进(text-indent)</h3> <blockquote><p>单位</p> <p>​		1em；文本首行缩进一个字符</p> <p>​		1px: 缩进一个像素</p> <p>单位可以使用负值</p></blockquote> <h3 id="文本对齐-text-align"><a href="#文本对齐-text-align" class="header-anchor">#</a> 文本对齐(text-align)</h3> <blockquote><p>text-align：文本的水平对齐</p> <p>​				可选值：</p> <p>​								默认情况  tetx-align:left  左对齐</p> <p>​								text-align:center;       居中对齐</p> <p>​			    				 text-align:right;         右对齐</p> <p>​								text-align:justify表示两端对齐</p> <p>​								它会在单词间平均分布间距已达到两边恰好对齐</p> <p>​								消除<strong>毛边</strong>。这也是印刷业经常用到的技术</p></blockquote> <h3 id="文本装饰-text-decoration"><a href="#文本装饰-text-decoration" class="header-anchor">#</a> 文本装饰（text-decoration）</h3> <blockquote><p>text-decoration:</p> <p>​						none默认。定义标准的文本。</p> <p>​						underline;下划线</p> <p>​						overline;上划线</p> <p>​						line-through;贯穿线</p> <p>text-decoration: underline line-through overline设置多种文本装饰</p></blockquote> <h3 id="大小写变换-text-transform"><a href="#大小写变换-text-transform" class="header-anchor">#</a> 大小写变换(text-transform:)</h3> <blockquote><p>text-transform:</p> <p>​						none:默认，定义带有大写字母和小写字母的标准的文本</p> <p>​						uppercase将所有字母大写</p> <p>​						lowercase将所有字母小写</p> <p>​						capitalize每个单词的首字母变成大写</p></blockquote> <h3 id="控制字母和单词间距-word-spacing和letter-spacing"><a href="#控制字母和单词间距-word-spacing和letter-spacing" class="header-anchor">#</a> 控制字母和单词间距(word-spacing和letter-spacing)</h3> <blockquote><p><strong>word-spacing</strong>控制词间距,很少用.</p> <blockquote><p>它的值意味着在默认间距的基础上增加或减少一定会的量</p></blockquote> <p><strong>letter-spacing</strong>控制字符间的距离,</p> <blockquote><p>对于小写英文,人为改变字母间距也不是好事,因为大多数字体设计的初衷就是让人更容易辨别整个单词,中文的字间距也可以通过这个值设置</p></blockquote></blockquote> <h3 id="空白处理-white-space"><a href="#空白处理-white-space" class="header-anchor">#</a> 空白处理 (white-space)</h3> <blockquote><p>white-space：</p> <p>​				1.normal;默认</p> <p>​				2.nowrap;文本不会换行，文本会在在同一行上继续.</p> <p>​				3.pre保留空白</p></blockquote> <h3 id="强制换行-word-break"><a href="#强制换行-word-break" class="header-anchor">#</a> 强制换行 (word-break)</h3> <blockquote><p>word-break：</p> <ol><li>normal  默认</li> <li>break-all 允许在单词内换行;</li></ol></blockquote> <h3 id="文本溢出-text-overflow"><a href="#文本溢出-text-overflow" class="header-anchor">#</a> 文本溢出  (text-overflow)</h3> <blockquote><p>text-overflow</p> <ol><li>clip:       修剪文本</li> <li>ellipsis 	被修剪的文本用略符号来代表(....)</li></ol></blockquote> <p>写法:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">text-overflow</span><span class="token punctuation">:</span>clip<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="单行文本溢出处理方法组合写法"><a href="#单行文本溢出处理方法组合写法" class="header-anchor">#</a> 单行文本溢出处理方法组合写法</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span><span class="token comment">/*不允许换行*/</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><span class="token comment">/*溢出隐藏*/</span> 
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span><span class="token comment">/*溢出省略*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="多行文本溢出处理方法组合写法-了解"><a href="#多行文本溢出处理方法组合写法-了解" class="header-anchor">#</a> 多行文本溢出处理方法组合写法(了解)</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code>  <span class="token selector">p</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 3px solid skyblue<span class="token punctuation">;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span><span class="token comment">/*溢出隐藏*/</span>
    <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span><span class="token comment">/*溢出省略*/</span>
    <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span><span class="token comment">/*兼容写法 css3盒子属性 弹性盒模型的前身*/</span>
    <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span><span class="token comment">/*从上往下换行*/</span>
    <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span><span class="token comment">/*多于2行省略*/</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="继承"><a href="#继承" class="header-anchor">#</a> 继承</h2> <p>样式的继承: 我们为一个元素设置的样式同时也会应用到它的后代元素上</p> <p>继承是发生在祖先元素的后代之间</p> <p>继承是为了方便开发,利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,这样只需设置一次,即可让所有元素都具有该样式</p> <p>注意:并不是所有的样式都会继承</p> <p>1.默认继承的</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">font</span><span class="token punctuation">:</span>fons-style font-variant font-weight font-size/line-height font-family<span class="token punctuation">;</span>
color<span class="token punctuation">;</span>   <span class="token comment">/*字体颜色*/</span>
text-align<span class="token punctuation">;</span>  <span class="token comment">/*文本水平对齐*/</span>
text-indent<span class="token punctuation">;</span> <span class="token comment">/*文本缩进*/</span> 
letter-spacing<span class="token punctuation">;</span>  <span class="token comment">/*字符间间距*/</span>
word-spacing<span class="token punctuation">;</span>   <span class="token comment">/*词间距*/</span>
<span class="token comment">/*可被子元素继承*/</span> 
		
li的小圆点也是从ul继承而来
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>2.a标签不继承color值</p> <p>3.默认不继承的给属性加inhrit可以让他显示的继承.</p> <blockquote><p>例如background-color:inherit;</p></blockquote> <p>4.子元素有的属性就不会去进行继承</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/04-盒模型.html" class="prev">
        02-CSS盒模型
      </a></span> <span class="next"><a href="/./guide/notes/css/06-显示样式.html">
        04-显示样式
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/20.bb3b854e.js" defer></script>
  </body>
</html>
